<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>指令</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vue.js"></script>
  </head>
  <!-- 
    v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 
    Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，
    然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 
    管理所有模板的单页面应用程序 (SPA - single page application) 时，
    v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
 -->
  <body>
    <div id="app">
      <!-- 
            v-bind 缩写
         -->
      <!-- 完整语法 -->
      <a v-bind:href="url">...</a>

      <!-- 缩写 -->
      <a :href="url">...</a>

      <!-- 动态参数的缩写 (2.6.0+) -->
      <a :[key]="url"> ... </a>

      <!-- v-on 缩写 -->

      <!-- 完整语法 -->
      <a v-on:click="doSomething">...</a>

      <!-- 缩写 -->
      <a @click="doSomething">...</a>

      <!-- 动态参数的缩写 (2.6.0+) -->
      <a @[event]="doSomething"> ... </a>

      <!-- 
          它们看起来可能与普通的 HTML 略有不同，
          但 : 与 @ 对于 attribute 名来说都是合法字符，
          在所有支持 Vue 的浏览器都能被正确地解析
       -->
    </div>
  </body>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {},
    });
  </script>
</html>
